<template>
  <Page class="apply-form">
    <!-- 顶部区域 -->
    <div class="apply-top">
      <div class="apply-top-title1">知识产权质押</div>
      <div class="apply-top-title2">融资需求</div>
    </div>

    <div class="apply-body">
      <van-cell
        title="企业名称"
        required
      >
        <div slot="right-icon">
          <input
            placeholder="请输入企业名称"
            v-model="form.corpName"
            @input="changeValue"
          />
          <!-- 下拉搜索框 -->
          <div
            class="search-body"
            v-show="showSearch"
          >
            <div
              v-for="(item, index) in bossList"
              :key="index"
              class="search-item"
              v-html="item.viewName"
              @click="selectOne(item)"
            ></div>
          </div>
        </div>
      </van-cell>
      <van-cell
        title="统一信用代码"
        required
      >
        <div slot="right-icon">
          <input
            placeholder="请输入统一信用代码"
            v-model="form.corpCredit"
            disabled
          />
        </div>
      </van-cell>
      <van-cell
        title="联系人"
        required
      >
        <div slot="right-icon">
          <input
            placeholder="请输入联系人"
            v-model="form.person"
          />
        </div>
      </van-cell>
      <van-cell
        title="联系方式"
        required
      >
        <div slot="right-icon">
          <input
            placeholder="请输入联系方式"
            v-model="form.phone"
            type="number"
            pattern="\d*"
          />
        </div>
      </van-cell>
      <van-cell
        title="意向贷款银行"
        @click="openBank"
        required
      >
        <div slot="right-icon">
          <div class="bank_input">
            <div class="left">
              <div v-if="selectBanklist.length !== 0">
                <div
                  class="bank_tag"
                  v-for="(item, index) in selectBanklist"
                  :key="item.bankId"
                  @click.stop="closebankClick(item, index)"
                >
                  {{item.bankName}}
                  <van-icon
                    name="clear"
                    class="bank-tag-icon"
                  />
                </div>
              </div>
              <div
                v-if="selectBanklist.length == 0"
                style="color: #ccc;"
              > 请选择银行</div>
            </div>
            <div class="right-img">
              <img
                class="right-img"
                src=" https://zx-1311146360.cos.ap-shanghai.myqcloud.com/version01/jiantou.png"
              />
            </div>
          </div>
          <div class="selecttext">
            <span>
              最多可选5家银行
            </span>
          </div>
        </div>
      </van-cell>
      <van-cell
        title="意向贷款金额"
        required
      >
        <div slot="right-icon">
          <div style="display: flex;align-items: center;">
            <input
              class="linkman_input"
              placeholder="请输入意向贷款金额"
              type="number"
              pattern="\d*"
              v-model="form.amount"
            />
            <span style="margin-left: 10px;font-size: 14px;">万元</span>
          </div>
        </div>
      </van-cell>
      <van-cell
        title="是否首次贷款"
        required
      >
        <div class="right-is">
          <van-radio-group
            v-model="form.isFirst"
            direction="horizontal"
          >
            <van-radio name="0">否</van-radio>
            <van-radio name="1">是</van-radio>
          </van-radio-group>
        </div>
      </van-cell>
      <van-cell title="">
      </van-cell>
      <div class="description">
        <textarea
          rows="8"
          maxlength="200"
          οnchange="this.value=this.value.substring(0, 200)"
          οnkeydοwn="this.value=this.value.substring(0, 200)"
          οnkeyup="this.value=this.value.substring(0, 200)"
          placeholder="提供融资申请补充说明，比如专利、商标等详细信息（200字以内）"
          v-model="applyInstr"
        ></textarea>
      </div>
    </div>

    <!-- 银行选择弹框 -->
    <transition name="bottomToTop05">
      <bankList
        ref="bankList"
        v-if="showBank"
        @cancel="cancel"
        :bankList="bankList"
        @clickConfirm="clickConfirm"
        @searchBank="searchBank"
      ></bankList>
    </transition>
    <button
      class="theme-btn"
      :class="{ disabled: canSub }"
      @click="submitForm"
    >
      提交
    </button>
  </Page>
</template>

<script>
import bankList from "@/components/apply/bankList";
import { getOrderedBanks, getCorpNames, insertFinance } from "@/interfaces/mini";
import { Dialog } from 'vant'
export default {
  name: "demoForm",
  components: {
    bankList
  },
  data () {
    return {
      // form表单
      form: {
        corpName: '',
        corpCredit: '',
        person: '',
        phone: '',
        disposition: '',
        amount: '',
        isFirst: '',
      },
      applyInstr: '',
      selectBanklist: [],
      bankListAll: [],
      bankList: [],
      bankList1: [],
      radio: '0',
      showBank: false,
      bossList: [],
      showSearch: false,
    };
  },
  computed: {
    canSub () {
      return Object.values(this.form).some(val => !val)
    }
  },
  created () {
    this.initPage()
  },
  watch: {
    // 'form.corpName' (newval, oldval) {

    // },
    'form.amount' (newval, oldval) {
      const test = newval ? newval.toString().replace(/^[0]+/, '') : 0
      this.form.amount = test
      // console.log(test)
      if (test > 100000) this.form.amount = 100000;
      if (test < 0) this.form.amount = 0;
    }
  },
  methods: {
    initPage () {
      this.getBankList()
    },
    async getBossList (timer) {
      console.log(timer, 'timer')
      // this.showSearch = true
      const params = {
        corpName: this.form.corpName
      }
      console.log(params, 'params')
      const res = await getCorpNames(params)
      console.log(res, '搜索的企业列表')
      if (this.timer === timer) {
        if (res.data.length > 0) {
          // if (res.data.length === 1) {
          //   this.form.corpName = res.data[0].corpName
          //   this.form.corpCredit = res.data[0].corpCredit
          // } else {
          res.data.forEach(ped => {
            ped.viewName = this.deal(ped.corpName)
          })
          this.showSearch = true
          this.bossList = res.data
          // }
          // console.log(this.bossList, 'bossList')
        } else {
          this.showSearch = false
        }
      }
    },
    async getBankList (name = '') {
      const params = {
      }
      console.log(params, 'params');
      const res = await getOrderedBanks(params);
      console.log(res, 'res')
      this.bankListAll = res.data
      this.bankList = this.bankListAll
    },
    deal (val) {
      if (this.form.corpName) {
        return val.replace(this.form.corpName, "<font style='color:#fd485e;'>" + this.form.corpName + '</font>');
      } else {
        return val;
      }
    },
    selectOne (item) {
      this.form.corpName = item.corpName
      this.form.corpCredit = item.corpCredit
      this.showSearch = false
    },
    cancel () {
      this.showBank = false
    },
    clickConfirm () {
      this.showBank = false
      const list = JSON.parse(JSON.stringify(this.bankList))
      this.selectBanklist = list.filter(val => val.checked)
      this.form.disposition = this.selectBanklist.map(pre => pre.bankId).join(';')
    },
    async submitForm () {
      // 校验一些信息的填写格式是否真正确
      // 校验手机号码
      const mobileRegExp = utils.regExp.get("mobile");
      if (!mobileRegExp.test(this.form.phone)) {
        this.$toast("请先输入正确的手机号码");
        return;
      }
      if (!this.canSub) {
        this.form.amount = this.form.amount + ''
        const params = {
          ...this.form,
          applyInstr: this.applyInstr
        }
        console.log(params, '提交的内容')
        const res = await insertFinance(params)
        console.log(res, 'res')
        if (res.code == 200) {
          Dialog.alert({
            title: '',
            message: '您的需求已提交至意向银行，请继续完善问卷调查！',
            theme: 'round-button',
            confirmButtonColor: '#008ef0'
          }).then(() => {
            this.$router.push({
              name: 'question',
              query: {
                id: res.data
              }
            });
          });
        }
      }
    },
    openBank () {
      this.bankList = this.bankListAll
      this.showBank = true
    },
    changeSearch () {
      this.showSearch = true
    },
    closebankClick (item, index) {
      // 更新银行的选中状态
      this.bankList.find(pre => pre.bankId === item.bankId).checked = false
      this.selectBanklist.splice(index, 1)
      console.log(this.selectBanklist, 'selectBanklist')
    },
    searchBank (item) {
      this.bankList = this.bankListAll.filter(pre => pre.bankName.indexOf(item) !== -1)
    },
    changeValue () {
      this.form.corpCredit = ''
      // 代码实现
      if (this.form.corpName.length > 3) {
        this.timer = new Date().getTime()
        this.getBossList(this.timer)
      } else {
        this.showSearch = false
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/demo/index.scss";
.apply-form {
  height: 100%;
  overflow: auto;
}
.apply-top {
  height: 139px;
  border: 0.5px solid transparent;
  background-image: url("https://zx-1311146360.cos.ap-shanghai.myqcloud.com/wx_h5/wx_h5_top.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .apply-top-title1 {
    margin: 40px 0 0 28px;
    font-size: 21px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    color: #ffffff;
  }
  .apply-top-title2 {
    margin: 6px 0 0 28px;
    font-size: 17px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    color: #ffffff;
  }
}
.apply-form {
  padding-bottom: 20px;
  // border: 1px solid red;
}
.apply-body {
  padding-top: 10px;
  border: 0px solid transparent;
  background-color: #fff;
  // border: 1px solid red;
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
  margin-top: -10px;
  input {
    background: none;
    outline: none;
    border: none;
    text-align: right;
  }
  input:focus {
    border: none;
  }
  .bank_input {
    width: 200px;
    border: 1px solid #e0e1e5;
    padding: 10px 10px;
    padding-right: 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right-img {
      width: 12px;
      height: 18px;
      // position: relative;
      // bottom: -5px;
    }
    .bank_tag {
      margin-bottom: 7px;
      margin-right: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #999999;
      background: #f5f5f5;
      height: 28px;
      padding: 0 5px;
      font-size: 12px;
      .bank-tag-icon {
        margin-left: 4px;
      }
    }
  }
  .selecttext {
    // width: 500rpx;
    height: 30px;
    line-height: 30px;
    text-align: right;
    color: #999999;
    font-size: 12px;
    font-family: Alibaba PuHuiTi;
    color: #999999;
  }
  .right-is {
    display: flex;
    justify-content: flex-end;
  }
  .search-body {
    position: absolute;
    top: 42px;
    right: 10px;
    width: 240px;
    height: 200px;
    // border: 1px solid red;
    background: #fff;
    z-index: 100;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    .search-item {
      margin: 4px 0 0 8px;
      font-size: 12px;
      font-family: Alibaba PuHuiTi;
      color: #999999;
    }
  }
  .linkman_input {
    width: 140px;
  }
  .description {
    // width: 90%;
    text-align: center;
    textarea {
      width: 90%;
      padding: 4px;
      font-size: 14px;
    }
  }
}
</style>
